<template>
  <div class="person">
    <h3>当水温达到60℃或水位达到80cm的时，给服务器发送请求</h3>
    水温: {{ temp }} ℃
    <hr>
    水位: {{ height }} cm
    <hr>
    <button @click="riseTemp">水温增高10℃</button>
    <button @click="riseHeight">水位增高10cm</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue';

let temp = ref(10)
let height = ref(0)

function riseTemp() {
  temp.value += 10
}

function riseHeight() {
  height.value += 10
}

// // 监视 -- watch实现
// watch([temp, height], (value) => {
//   const [newTemp, newHeight] = value
//   if (newTemp >= 60 || newHeight >= 80) {
//     console.log('给服务器发送请求');
//   }
// })

watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    // console.log(temp.value,height.value);
    console.log('给服务器发送请求');
  }
})

</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>